/**
 * 统一变量定义 - 合并所有重复的CSS变量和常量
 * Unified Variables - Merged all duplicate CSS variables and constants
 */

/* ===== 基础变量定义 ===== */
:root {
  --radius-large: 1rem;
  --content-delay: 150ms;
}

/* ===== 主题相关变量 ===== */
:root {
  --primary: oklch(0.70 0.14 var(--hue));
  --page-bg: oklch(0.95 0.01 var(--hue));
  --card-bg: white;
  --card-bg-transparent: rgba(255, 255, 255, 0.8);
  
  --btn-content: oklch(0.55 0.12 var(--hue));
  --btn-regular-bg: oklch(0.95 0.025 var(--hue));
  --btn-regular-bg-hover: oklch(0.9 0.05 var(--hue));
  --btn-regular-bg-active: oklch(0.85 0.08 var(--hue));
  
  --btn-plain-bg-hover: oklch(0.95 0.025 var(--hue));
  --btn-plain-bg-active: oklch(0.98 0.01 var(--hue));
  
  --btn-card-bg-hover: oklch(0.98 0.005 var(--hue));
  --btn-card-bg-active: oklch(0.9 0.03 var(--hue));
  
  --enter-btn-bg: var(--btn-regular-bg);
  --enter-btn-bg-hover: var(--btn-regular-bg-hover);
  --enter-btn-bg-active: var(--btn-regular-bg-active);
  
  --deep-text: oklch(0.25 0.02 var(--hue));
  --title-active: oklch(0.6 0.1 var(--hue));
  
  --line-divider: rgba(0, 0, 0, 0.08);
  --line-color: rgba(0, 0, 0, 0.1);
  --meta-divider: rgba(0, 0, 0, 0.2);
  --content-meta: rgba(0, 0, 0, 0.7);
  
  --inline-code-bg: var(--btn-regular-bg);
  --inline-code-color: var(--btn-content);
  --selection-bg: oklch(0.90 0.05 var(--hue));
  --codeblock-selection: oklch(0.40 0.08 var(--hue));
  --codeblock-bg: oklch(0.17 0.015 var(--hue));
  --codeblock-topbar-bg: oklch(0.3 0.02 var(--hue));
  
  --license-block-bg: rgba(0, 0, 0, 0.03);
  
  --link-underline: oklch(0.93 0.04 var(--hue));
  --link-hover: oklch(0.95 0.025 var(--hue));
  --link-active: oklch(0.90 0.05 var(--hue));
  
  --float-panel-bg: white;
  
  --scrollbar-bg-light: rgba(0, 0, 0, 0.4);
  --scrollbar-bg-hover-light: rgba(0, 0, 0, 0.5);
  --scrollbar-bg-active-light: rgba(0, 0, 0, 0.6);
  
  --scrollbar-bg-dark: rgba(255, 255, 255, 0.4);
  --scrollbar-bg-hover-dark: rgba(255, 255, 255, 0.5);
  --scrollbar-bg-active-dark: rgba(255, 255, 255, 0.6);
  
  --scrollbar-bg: var(--scrollbar-bg-light);
  --scrollbar-bg-hover: var(--scrollbar-bg-hover-light);
  --scrollbar-bg-active: var(--scrollbar-bg-active-light);
  
  --display-light-icon: 1;
  --display-dark-icon: 0;
  
  --admonitions-color-tip: oklch(0.7 0.14 180);
  --admonitions-color-note: oklch(0.7 0.14 250);
  --admonitions-color-important: oklch(0.7 0.14 310);
  --admonitions-color-warning: oklch(0.7 0.14 60);
  --admonitions-color-caution: oklch(0.6 0.2 25);
  
  /* TOC相关变量 */
  --toc-badge-bg: oklch(0.9 0.045 var(--hue));
  --toc-btn-hover: oklch(0.92 0.015 var(--hue));
  --toc-btn-active: oklch(0.90 0.015 var(--hue));
  --toc-width: calc((100vw - var(--page-width)) / 2 - 1rem);
  --toc-item-active: oklch(0.70 0.13 var(--hue));
  
  /* 主题色选择条渐变 */
  --color-selection-bar: linear-gradient(to right, 
    oklch(0.80 0.10 0), 
    oklch(0.80 0.10 30), 
    oklch(0.80 0.10 60), 
    oklch(0.80 0.10 90), 
    oklch(0.80 0.10 120), 
    oklch(0.80 0.10 150), 
    oklch(0.80 0.10 180), 
    oklch(0.80 0.10 210), 
    oklch(0.80 0.10 240), 
    oklch(0.80 0.10 270), 
    oklch(0.80 0.10 300), 
    oklch(0.80 0.10 330), 
    oklch(0.80 0.10 360)
  );
}

/* 暗色主题变量 */
:root.dark {
  --primary: oklch(0.75 0.14 var(--hue));
  --page-bg: oklch(0.16 0.014 var(--hue));
  --card-bg: oklch(0.23 0.015 var(--hue));
  --card-bg-transparent: rgba(23, 23, 23, 0.8);
  
  --btn-content: oklch(0.75 0.1 var(--hue));
  --btn-regular-bg: oklch(0.33 0.035 var(--hue));
  --btn-regular-bg-hover: oklch(0.38 0.04 var(--hue));
  --btn-regular-bg-active: oklch(0.43 0.045 var(--hue));
  
  --btn-plain-bg-hover: oklch(0.30 0.035 var(--hue));
  --btn-plain-bg-active: oklch(0.27 0.025 var(--hue));
  
  --btn-card-bg-hover: oklch(0.3 0.03 var(--hue));
  --btn-card-bg-active: oklch(0.35 0.035 var(--hue));
  
  --line-divider: rgba(255, 255, 255, 0.08);
  --line-color: rgba(255, 255, 255, 0.1);
  --meta-divider: rgba(255, 255, 255, 0.2);
  --content-meta: rgba(255, 255, 255, 0.6);
  
  --selection-bg: oklch(0.40 0.08 var(--hue));
  --codeblock-bg: oklch(0.17 0.015 var(--hue));
  --codeblock-topbar-bg: oklch(0.12 0.015 var(--hue));
  
  --license-block-bg: var(--codeblock-bg);
  
  --link-underline: oklch(0.40 0.08 var(--hue));
  --link-hover: oklch(0.40 0.08 var(--hue));
  --link-active: oklch(0.35 0.07 var(--hue));
  
  --float-panel-bg: oklch(0.19 0.015 var(--hue));
  
  --scrollbar-bg: var(--scrollbar-bg-dark);
  --scrollbar-bg-hover: var(--scrollbar-bg-hover-dark);
  --scrollbar-bg-active: var(--scrollbar-bg-active-dark);
  
  --display-light-icon: 0;
  --display-dark-icon: 1;
  
  --admonitions-color-tip: oklch(0.75 0.14 180);
  --admonitions-color-note: oklch(0.75 0.14 250);
  --admonitions-color-important: oklch(0.75 0.14 310);
  --admonitions-color-warning: oklch(0.75 0.14 60);
  --admonitions-color-caution: oklch(0.65 0.2 25);
  
  /* TOC相关变量 - 暗色主题 */
  --toc-badge-bg: var(--btn-regular-bg);
  --toc-btn-hover: oklch(0.22 0.02 var(--hue));
  --toc-btn-active: oklch(0.25 0.02 var(--hue));
  --toc-item-active: oklch(0.35 0.07 var(--hue));
  
  /* 主题色选择条渐变 - 暗色主题 */
  --color-selection-bar: linear-gradient(to right, 
    oklch(0.70 0.10 0), 
    oklch(0.70 0.10 30), 
    oklch(0.70 0.10 60), 
    oklch(0.70 0.10 90), 
    oklch(0.70 0.10 120), 
    oklch(0.70 0.10 150), 
    oklch(0.70 0.10 180), 
    oklch(0.70 0.10 210), 
    oklch(0.70 0.10 240), 
    oklch(0.70 0.10 270), 
    oklch(0.70 0.10 300), 
    oklch(0.70 0.10 330), 
    oklch(0.70 0.10 360)
  );
}

/* ===== 响应式断点变量 ===== */
:root {
  /* 断点定义 */
  --breakpoint-xs: 320px;
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  
  /* 容器宽度 */
  --container-xs: 100%;
  --container-sm: 100%;
  --container-md: 100%;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;
}

/* ===== 动画变量 ===== */
:root {
  /* 缓动函数 */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-accelerate: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-sharp: cubic-bezier(0.4, 0, 0.6, 1);
  
  /* 动画时长 */
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-medium: 300ms;
  --duration-slow: 400ms;
  --duration-slower: 500ms;
  
  /* 动画延迟 */
  --delay-none: 0ms;
  --delay-short: 50ms;
  --duration-medium: 100ms;
  --delay-long: 150ms;
  --delay-longer: 200ms;
}

/* ===== 间距变量 ===== */
:root {
  /* 基础间距 */
  --spacing-xs: 0.25rem;    /* 4px */
  --spacing-sm: 0.5rem;     /* 8px */
  --spacing-md: 0.75rem;    /* 12px */
  --spacing-lg: 1rem;       /* 16px */
  --spacing-xl: 1.25rem;    /* 20px */
  --spacing-2xl: 1.5rem;    /* 24px */
  --spacing-3xl: 2rem;      /* 32px */
  --spacing-4xl: 2.5rem;    /* 40px */
  --spacing-5xl: 3rem;      /* 48px */
  
  /* 组件间距 */
  --widget-gap-mobile: var(--spacing-md);
  --widget-gap-tablet: var(--spacing-lg);
  --widget-gap-desktop: var(--spacing-xl);
  
  /* 侧边栏宽度 */
  --sidebar-width-mobile: 100%;
  --sidebar-width-tablet: 280px;
  --sidebar-width-desktop: 320px;
}

/* ===== 阴影变量 ===== */
:root {
  /* 基础阴影 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
  
  /* 特殊阴影 */
  --shadow-navbar: 0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-navbar-dark: 0 4px 16px rgba(0, 0, 0, 0.2);
  --shadow-button: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-button-dark: 0 4px 12px rgba(255, 255, 255, 0.1);
}

/* ===== 边框半径变量 ===== */
:root {
  --radius-sm: 0.25rem;     /* 4px */
  --radius-md: 0.375rem;    /* 6px */
  --radius-lg: 0.5rem;      /* 8px */
  --radius-xl: 0.75rem;     /* 12px */
  --radius-2xl: 1rem;       /* 16px */
  --radius-3xl: 1.5rem;     /* 24px */
  --radius-full: 9999px;
}

/* ===== 透明度变量 ===== */
:root {
  --opacity-0: 0;
  --opacity-5: 0.05;
  --opacity-10: 0.1;
  --opacity-20: 0.2;
  --opacity-25: 0.25;
  --opacity-30: 0.3;
  --opacity-40: 0.4;
  --opacity-50: 0.5;
  --opacity-55: 0.55;
  --opacity-60: 0.6;
  --opacity-70: 0.7;
  --opacity-75: 0.75;
  --opacity-80: 0.8;
  --opacity-90: 0.9;
  --opacity-95: 0.95;
  --opacity-100: 1;
}

/* ===== 模糊效果变量 ===== */
:root {
  --blur-sm: 4px;
  --blur-md: 8px;
  --blur-lg: 12px;
  --blur-xl: 16px;
  --blur-2xl: 20px;
  --blur-3xl: 24px;
}

/* ===== 变换变量 ===== */
:root {
  /* 平移 */
  --translate-xs: 0.125rem;   /* 2px */
  --translate-sm: 0.25rem;     /* 4px */
  --translate-md: 0.5rem;      /* 8px */
  --translate-lg: 0.75rem;     /* 12px */
  --translate-xl: 1rem;        /* 16px */
  --translate-2xl: 1.5rem;      /* 24px */
  --translate-3xl: 2rem;       /* 32px */
  
  /* 缩放 */
  --scale-95: 0.95;
  --scale-98: 0.98;
  --scale-100: 1;
  --scale-105: 1.05;
  --scale-110: 1.1;
}

/* ===== 层级变量 ===== */
:root {
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;
  --z-navbar: 20;
  --z-banner: 10;
  --z-content: 30;
}

/* ===== 性能优化变量 ===== */
:root {
  /* GPU加速 */
  --gpu-transform: translateZ(0);
  --gpu-backface: hidden;
  
  /* 动画性能 */
  --animation-fill-mode: both;
  --animation-timing: var(--ease-standard);
  --animation-duration: var(--duration-medium);
}

/* ===== 响应式工具类 ===== */
@media (max-width: 767px) {
  :root {
    --container-width: var(--container-sm);
    --widget-gap: var(--widget-gap-mobile);
    --sidebar-width: var(--sidebar-width-mobile);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --container-width: var(--container-md);
    --widget-gap: var(--widget-gap-tablet);
    --sidebar-width: var(--sidebar-width-tablet);
  }
}

@media (min-width: 1024px) {
  :root {
    --container-width: var(--container-lg);
    --widget-gap: var(--widget-gap-desktop);
    --sidebar-width: var(--sidebar-width-desktop);
  }
}